<template>
  <div class="xsbox">
      <header>
          <p @click="fun()"> &lt; </p>
          <p>新书</p>
          <p class="iconfont icon-sousuo" @click="fun1()"></p>
      </header>
      <main>
          <div class="tuwen" v-for="(v,i) in shujv" :key="i">
              <div class="twleft">
                  <img :src="v.src" alt="">
              </div>
              <div class="twright">
                  <p class="p1">
                      <span>{{v.book}}</span>
                      <span class="ps1">{{v.fenshu}}</span>
                  </p>
                  <p class="p2">{{v.xq}}</p>
                  <p class="p3">{{v.zuozhe}}</p>
              </div>
          </div>
      </main>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.go(-1)
        },
        fun1(){
            this.$router.push('/sousuo')
        }
    },
    computed:{
        shujv(){
            return this.$store.state.xinshu
        }
    }
}
</script>

<style scoped>
    .xsbox{
        width: 100%;
    }
    header{
        width: 100%;
        height: .5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 .2rem;
        border-bottom: .01rem solid #f8f8f8;
        position: fixed;
        top: 0;
        background: white;
    }
    header p{
        height: .5rem;
        line-height: .5rem;
        font-size: .2rem;
    }
    main{
        margin-top: .5rem;
    }
    main .tuwen{
        height: 1.2rem;
        width: 100%;
        box-sizing: border-box;
        padding: .2rem;
        display: flex;
    }
    main .tuwen .twleft,img{
        height: .95rem;
        width: .73rem;
    }
    main .tuwen .twright{
        height: .95rem;
        width: 100%;
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    main .tuwen .twright .p1{
        font-size: .14rem;
        display: flex;
        justify-content: space-between;
    }
    main .tuwen .twright .p1 .ps1{
        color: #c59d79;
    }
    main .tuwen .twright .p2{
        font-size: .14rem;
        color: #666666;
    }
    main .tuwen .twright .p3{
        font-size: .12rem;
        color: #bfbfbf;
    }
</style>